<template>
	<section>
		<el-row>
			<el-col :span="24">
				<div class="tableTitle">角色列表</div>
				<el-row style="margin: 10px 0;text-align: right;padding-right: 20px;">
					<el-button type="primary" @click="add" style="">添加</el-button>
				</el-row>

				<el-table :data="tableData" border stripe style="width: 100%">
					<el-table-column prop="roleId" label="ID">
					</el-table-column>
					<el-table-column prop="roleName" label="角色名称">
					</el-table-column>
					<el-table-column label="操作" width="300">
						<template slot-scope="scope">
							<el-button size="small" icon="el-icon-edit" type="warning" @click="modify(scope.row)">编辑</el-button>
							<el-button size="small" icon="el-icon-delete" type="danger" @click="deleteRole(scope.$index,scope.row)">删除</el-button>
						</template>
					</el-table-column>

				</el-table>
			</el-col>
		</el-row>
		<el-dialog title="添加角色" :visible.sync="dialogFormVisible">
			<el-form :model="dataForm" ref="dataForm" :rules="rules">
				<el-form-item label="角色名称" prop="roleName">
					<el-input v-model="dataForm.roleName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="角色权限" prop="menuIds">
					<el-checkbox-group v-model="dataForm.menuIds">
						<el-checkbox :label="item.menuId" :key="item.menuId" v-for="item in menuList" name="type">{{item.name}}</el-checkbox>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="roleSave('dataForm')">确 定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { roleSave, roleDelete, roleList, roleUpdate, menuList } from '@/api/getData'

	export default {
		data() {
			return {
				dialogFormVisible: false,
				tableData: [],
				menuList:[],
				dataForm: {
					roleId: "",
					roleName: "",
					menuIds: [],
				},
				rules: {
					roleName: [{
						required: true,
						message: '请输入角色名称',
						trigger: 'blur'
					}],
					menuIds: [{
						required: true,
						message: '请选择角色权限',
						trigger: 'change'
					}]
				}
			};
		},
		created() {
			this.initData();
		},
		methods: {
			async initData() {
				try {
					const returnData = await roleList({
						pageSize: "100",
						pageNum: "1",
					});
					if(returnData.code == "0") {
						this.tableData = returnData.list.rows;
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			async menuListFun(obj) {
				try {
					const returnData = await menuList({
						pageSize: "100",
						pageNum: "1",
					});
					if(returnData.code == "0") {
						this.menuList = returnData.list.rows;
						if(obj == null){
							this.dataForm.roleId = "";
							this.dataForm.roleName ="";
							this.dataForm.menuIds = [];
						}else{
							this.dataForm.roleId = obj.roleId;
							this.dataForm.roleName =  obj.roleName;
							this.dataForm.menuIds =  obj.menuIds;
						}
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			async deleteRole(index, row) {
				try {
					let returnData = await roleDelete({
						id: row.roleId
					});
					if(returnData.code == "0") {
						this.tableData.splice(index, 1);
						this.$message({
							message: "删除成功！",
							type: 'success'
						});
					} else {
						this.$message({
							type: 'error',
							message: returnData.msg
						});
					}
				} catch(err) {
					console.log('获取数据失败', err);
				}
			},
			async roleSave(formData) {
				this.$refs[formData].validate(async(valid) => {
					if(valid) {
						try {
							let result = null;
							if(this.dataForm.roleId != ""){
								 result = await roleUpdate(this.dataForm);
							}else{
								 result = await roleSave(this.dataForm);
							}
							if(result.code == "0") {
								this.$message({
									type: 'success',
									message: '保存成功'
								});
								this.dialogFormVisible = false;
								this.initData();
							}
						} catch(err) {
							this.$message({
								type: 'error',
								message: result.msg
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: '请检查输入是否正确',
							offset: 100
						});
						return false;
					}
				});
			},
			add() {
				this.menuListFun();
				this.dialogFormVisible = true;
			},
			modify(row) {
				this.menuListFun(row);
				this.dialogFormVisible = true;
			},
		}
	}
</script>

<style scoped>
	.tableTitle {
		background-color: #20a0ff;
		line-height: 40px;
		color: #ffffff;
		padding-left: 10px;
	}
	
	.demo-form-inline {
		margin-top: 20px;
	}
</style>